<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        我叫小谢
        <span>111</span>
    </div>

    <script>

        var div1=document.querySelector('#div1');
        div1.onclick=function(){
            // 1.使用innerHTML  修改元素内内容
            // div1.innerHTML='<a href="#">我叫谢彦祖</a>';

            // // 2.innerText  修改元素内容
            // div1.innerText='<a href="#">我叫谢彦祖</a>';

            // 区别  innerHTML 可以识别标签  帮我们转义
            // innerText 不能事变 输入什么就变成什么

            // 不光可以设置文字  还可以获取文字
            // 获取文字区别  innerHtml 可以获取到标签内所有内容（包括内部的标签）
            console.log(div1.innerHTML);
            // innerText  只能获取到其中的文字
            console.log(div1.innerText);
            
        }
    </script>
</body>
</html>